<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-28 14:35:58
-->
<template>
    <div class="comment-item">
        <div class="base-info">
            <div class="item-img">
                <img :src="item.user.avatarUrl" alt="">
            </div>
            <!-- 右侧 -->
            <div class="item-content">
                <!-- 评论 -->
                <div class="info">
                    <span class="name">{{ item.user.nickname }} :</span>
                    <span>{{ item.content }}</span>
                </div>
                <!-- 被回复的评论 -->
                <div class="reply" v-if="item.beReplied != null && item.beReplied.length !== 0">
                    <div v-for="(ele, index1) in item.beReplied" :key="index1">
                        <span>@{{ ele.user.nickname }}:</span>
                        {{ ele.content }}
                    </div>
                </div>

                <!-- 评论时间 -->
                <div class="item-time">
                    <span>{{ time }}</span>
                </div>

            </div>
        </div>

        <!-- 点赞 回复评论 -->
        <div class="like">
            <span class="iconfont icon-dianzan" :class="{ islike: item.liked }" @click="isLikeCommentBy(item)"></span>{{
                item.likedCount
            }}
            <span class="iconfont icon-xiaoxi" @click="replyComments(item)"></span>
        </div>
    </div>
</template>

<script setup>
import { useDateFormat } from '@vueuse/core'
import { getCurrentInstance, ref, computed } from 'vue'
import { getItem } from '@/utils/utils.js'

import { isLikeComment, replyComment } from '@/api/comment/comment.js'

//引入pinia
import { useUserStore } from '@/store/user.js'
//创建仓库对象
const user = useUserStore()

const instance = getCurrentInstance()
//查看挂载在全局对象上的方法
// console.log(instance.appContext.config.globalProperties);

//格式化时间
const time = computed(() => {
    return (useDateFormat(instance.props.item?.time, 'YYYY年MM月DD日 HH:mm:ss')).value
})

defineProps({
    item: {
        type: Object,
        default: {}
    },
    //资源类型
    // 0:歌曲music 1:mv 2:歌单playlist 3:专辑album 5:视频video
    commentType: Number,
    //资源id
    commentresId: {
        type: [Number, String]
    }
})

const emit = defineEmits(['getReplyComment'])



//点赞评论|取消点赞  需要登录
async function isLikeCommentBy(item) {
    // 先判断登录状态
    if (!user.isLogin) {  //没有登录
        instance.appContext.config.globalProperties.$message({
            showClose: true,
            message: '登录后才能点赞',
            type: 'warning'
        })
        return;
    }
    //是否点赞 liked = false 则 表示点赞t=1
    let t = item.liked ? 0 : 1
    //发送请求
    let res = await isLikeComment(instance.props.commentresId, item.commentId, t, instance.props.commentType, getItem('cookie'))
    if (res.data.code === 200) {
        if (t == 0) { //取消点赞
            instance.appContext.config.globalProperties.$message({
                showClose: true,
                message: '已经取消点赞',
                type: 'success'
            })
            //数量减1
            item.likedCount -= 1
            item.liked = !item.liked
        } else { //点赞
            instance.appContext.config.globalProperties.$message({
                showClose: true,
                message: '点赞成功!',
                type: 'success'
            })
            //数量+1
            item.likedCount += 1
            item.liked = !item.liked
        }
    } else {
        instance.appContext.config.globalProperties.$message({
            showClose: true,
            message: '点赞失败,请稍后再试!',
            type: 'danger'
        })
    }

}

//回复评论
function replyComments(item) {
    let replyInfo = {}
    replyInfo.commentId = item.commentId
    replyInfo.uname = item.user.nickname
    //触发父组件的自定义事件，来处理这个回复评论
    emit('getReplyComment', replyInfo)
}
</script>

<style lang="scss" scoped>
.comment-item {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    margin-top: 10px;

    .base-info {
        display: flex;

        .item-img {
            line-height: 65px;

            img {
                border-radius: 50%;
                height: 40px;
                width: 40px;
            }
        }

        .item-content {
            display: flex;
            font-size: 12px;
            flex-direction: column;
            justify-content: space-around;


            .info {
                .name {
                    margin-left: 10px;
                    cursor: pointer;
                    color: #507daf;
                }

                span {}
            }

            .reply {
                margin: 5px 0;
                padding: 10px 10px;
                background: #eee;
                color: #626262;

                span {
                    cursor: pointer;
                    color: #507daf;
                }
            }


            .item-time {
                margin-left: 10px;
                color: #999999;
            }

        }
    }

    .like {
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

}

.icon-dianzan,
.icon-xiaoxi {
    font-size: 18px;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5px;
}

.islike {
    color: #ff3a3a;
}
</style>